* {
    padding: 0px;
    margin: 0;
    box-sizing: border-box;
}


.banner {
    width: 100%;
    height: 650px;
    background-image: url("../image/书单用图.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0px -230px;
    display: flex;
    justify-content: space-between;
}

.nav {
    width: 100%;
    height: 90px;
    line-height: 90px;
    font-size: 26px;
    display: flex;
    justify-content: space-between;
    background-color: crimson;
    padding: 0px 10%;
}

.nav .as {
    width: 80%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}

.nav h2 {
    color: white;
    text-shadow: 3px 2px 3px #a5c560;
}

.nav .as a {
    text-align: center;
    width: calc(100% / 5);
    text-decoration: none;
    color: white;
}

.main {
    width: 80%;
    height: 500px;
    margin: 70px 10%;
    display: flex;
    justify-content: space-between;
    background-color: ghostwhite;
}



.main img {
    width: 49%;
    height: 100%;
    object-fit: cover;
}

.main .contents {
    font-size: 29px;
    padding: 20px 50px;
}

.main .contents h3 {
    float: left;
    color: orangered;
}

.main .contents p {
    margin: 40px 0px;
    text-indent: 2em;
}

.title {
    width: 40%;
    height: 60px;
    line-height: 60px;
    margin: 30px 30%;
    border-bottom: 8px solid crimson;
    font-size: 40px;
    text-align: center;
    padding: 20px 0px;
    color: black;
}

.photo {
    width: 80%;
    height: 560px;
    background-color: tomato;
    margin: 30px 10%;
    display: flex;
    overflow: hidden;
    justify-content: space-between;
}

.photo img {
    width: calc(100% / 6);
}

.photo img:hover {
    transition: all .3s;
    width: 50%;
    transform: scaleX(2) rotateZ(4deg);
    object-fit: cover;
}

.footer {
    width: 100%;
    height: 90px;
    line-height: 90px;
    text-align: center;
    background-color: #f1f1f1;
    font: size 30px;
    color: white;

}
.neirong {
    width: 100%;
    height: 850px;
    background-color: tomato;
    display: flex;
    justify-content: space-around;
}

.zihao {
    font-size: 2em;
    color: aqua;
}

.weizhi {
    height: 60px;
    font-size: 60px;
    display: flex;
    align-items: flex-end;
    background-color: rgb(189, 180, 181);
    position: fixed;
    /* 固定在视口中 */
    top: 0;
    /* 位于顶部 */
    justify-content: space-around;
    z-index: 2001;
    /* 确保在其他元素之上 */
    width: 100%;
}

.shell {
    width: 100%;
    height: 60px;
    line-height: 60px;
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    margin-top: -10px;
}

.button,
.portrait {
    position: relative;
    background-color: rgb(189, 180, 181);
    width: 170px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    transition: .3s;
    cursor: pointer;
}

.portrait::before {
    content: '';
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    transform: translate(30px, -30px);
    background-image: url('../image/头像.jpg');
    background-size: cover;
    border: 10px solid #fff;
}

.information {
    position: absolute;
    top: 60px;
    left: 0;
    width: 220px;
    background-color: #e07a5f;
    transform: translate(-20px, -200px);
    border-radius: 10px;
    padding: 20px 0;
    line-height: 0;
    height: 0;
    transition: .3s;
    opacity: 0;
    transform: translateY(10px);
    z-index: 1000;
}

.button:hover {
    background-color: #d15a39;
}

.button li:hover {
    background-color: #ffb29d;
}

.button ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: 170px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 1000;
}

.button ul li {
    height: 0;
    transition: .2s;
    opacity: 0;
    transform: translateY(-65px);
    background-color: #e07a5f;
}

.button:hover li {
    height: 65px;
    opacity: 1;
    transform: translateY(0);
}

.portrait:hover .information {
    opacity: 1;
    line-height: 65px;
    transform: translate(-20px, -10px);
    height: auto;
}